<template>
	<view id="order">
		<v-tabs v-model="current" :tabs="tabs" :field="'name'" @change="changeTab" :scroll="false" :activeColor="'#FFC102'"
		 :lineHeight="'8rpx'" :lineColor="'#ffc102'" :fixed="true"></v-tabs>
		<!-- <view style="height: 70rpx;"></view> -->
		<!-- 订单列表 -->
		<view class="order_list" style="padding-bottom: 50rpx;" v-if="total>=1">
			<view class="grace-order grace-box-shadow" v-for="(order, orderIndex) in orders" :key="orderIndex">
				<view class="grace-space-between grace-flex-center">
					<text class="grace-order-number">订单号 : {{order.order_num}}</text>
					<!-- <view class="grace-icons icon-close"><text class="grace-text" style="margin-left:10rpx;" @tap="removeorder(order.order_num)">删除订单</text></view> -->
				</view>

				<!-- 循环订单商品 -->
				<view class="grace-order-goods" v-for="(goods, indexGoods) in order.goods" :key="indexGoods" @click="bindDetail(goods.goods_id)">
					<!-- <image src="https://img.yzcdn.cn/upload_files/2020/01/15/FnQ6j4jxidcdC8cyepTfIOqQi8Qz.jpg" class="grace-order-goods-img"
					 mode="widthFix"></image> -->
					<image :src="IMG_URL+goods.img" class="grace-order-goods-img" mode="widthFix"></image>

					<!-- <text class="grace-order-goods-name">美国oxyfresh氧亲新宠物洁齿水 猫狗通用罐头</text> -->
					<view>
						<view class="grace-order-goods-name">{{goods.name}}</view>
						<view style="font-size: 26rpx;font-weight: 200;margin: 0 20rpx;">规格:{{goods.sku_name}}</view>
						<view class="grace-order-goods-price">
							<block v-if="if_vip==1">
								<text style="color: #999999;text-decoration:line-through;font-weight: 400;font-size: 24rpx;">￥{{goods.goods_price}}</text><text style="color: red;">￥{{goods.sku_vprice}}</text><text class="grace-order-goods-num"> x{{goods.goods_num}}</text>
							</block>
							<block v-else>
								<text style="color: red;">￥{{goods.goods_price}}</text><text class="grace-order-goods-num"> x{{goods.goods_num}}</text>
							</block>
						</view>
					</view>	
				</view>
				<!-- 订单底部 -->
				<view class="grace-order-footer grace-nowrap">
					<text class="grace-order-number">{{order.status}} {{order.time}}</text>
					<!-- <text class="grace-order-btn">查看发票</text> -->
					<text class="grace-order-btn grace-order-btn-red" v-if="order.status=='待付款'" @click.stop="pay(order.order_num)">去支付</text>
					<text class="grace-order-btn grace-order-btn-red" v-if="order.status=='待评价'" @click.stop="comments(order.order_num)">去评价</text>
					<text class="grace-order-btn grace-order-btn-red" v-if="order.status=='待收货' || order.status=='待评价'" @click.stop="bindLogistics(order.order_num)">查看物流</text>
				</view>
			</view>
			<uni-load-more :status="status"></uni-load-more>
		</view>
		<!-- 没有数据 -->
		<view class="no-list" v-else>
			<image src="../../static/images/collection-no.png" mode=""></image>
			<text>暂无数据</text>
		</view>
		<!-- 输入评论 -->
		<view class="enterComments" :style="{'bottom':height+'px'}" v-if="focus">
			<textarea class="enterComments_textarea" :adjust-position="false" placeholder-style="color:#CCCCCC" @blur="bindblur"
			 @focus="bindFocus" :focus="focus" :show-confirm-bar="false" placeholder="请输入评论..." v-model="content" />
			<button :class="{'enterComments_btn':true,'enterComments_btn_active' : content!='' ? true :false}" @click="onComments">评论</button>
		</view>
	</view>
</template>
<script>
	import {
		myorder,
		wxpay,
		addComment
	} from '@/api/index.js'
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	const app = getApp()
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						name: '全部',
						status: ""
					},
					{
						name: '待付款',
						status: 1
					},
					{
						name: '待发货',
						status: 2
					},
					{
						name: '待收货',
						status: 3
					},
					{
						name: '待评价',
						status: 4
					},
					{
						name: '已取消',
						status: 5
					}
				],
				IMG_URL: app.globalData.IMG_URL, //图片前缀
				page: 1, //页数
				total: 1, //总页数
				orders: [], //订单数据
				status: 'more',
				orderStatus: "",
				height:0,  //评论框高度
				focus:false,
				content:'', //评论内容
				orderNum:'',//评论的订单id
				if_vip:0, //是否会员
			}
		},
		onReady: function() {

		},
		onLoad: function(options) {
			this.openid = uni.getStorageSync('openid');
			this.current = options.current != undefined ? options.current : 0;
			this.orderStatus = options.current != undefined ? options.current : "";
			this.getOrders();
		},
		onReachBottom: function() {
			if (this.page == this.total) {
				return false
			}
			this.page += 1;
			this.getOrders();
		},
		methods: {
			changeTab: function(index) {
				this.orderStatus = this.tabs[index].status;
				this.page = 1;
				this.orders = [];
				this.getOrders();
				console.log('当前选中的项：' + index)
			},

			//初始化数据
			getOrders: function() {
				this.status = 'loading';
				myorder({
					openid: this.openid,
					page: this.page,
					status: this.orderStatus
				}).then(res => {
					this.if_vip = res.if_vip
					res.list.forEach((obj, i) => {
						obj.status = obj.status == 1 ? '待付款' : obj.status == 2 ? '待发货' : obj.status == 3 ? '待收货' : obj.status == 4 ?
							'待评价' : '订单取消'
					})
					this.orders = this.orders.concat(res.list)
					this.total = res.total
					if (res.total == this.page || res.total == 0) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
				})
			},
			
			// 查看物流
			bindLogistics:function(e){
				console.log(e)
				uni.navigateTo({
					url:`/pageA/logistics/logistics?order_id=${e}`
				})
			},

			// 跳转详情
			bindDetail: function(id) {
				uni.navigateTo({
					url: `/pageA/goodDetail/goodDetail?id=${id}`
				})
			},

			// 去支付
			pay: function(e) {
				wxpay({
					openid: this.openid,
					attach: "nabercat_order",
					body: 'bodyattachattachattach',
					order_num: e,
				}).then(resi => {
					if (typeof resi == 'string') {
						resi = JSON.parse(resi.trim())
					}
					uni.requestPayment({
						timeStamp: resi.timeStamp,
						nonceStr: resi.nonceStr,
						package: resi.package,
						signType: resi.signType,
						paySign: resi.paySign,
						success: () => {
							uni.showToast({
								title: '支付成功',
								duration: 1500,
							});
						},
						fail: (err) => {
							console.log(err)
						}
					})
				})
			},
			
			// 输入框获取焦点
			bindFocus:function(e){
				this.height=e.detail.height
			},
			
			// 失去焦点
			bindblur:function(e){
				this.focus=false
			},
			
			// 评论
			comments:function(orderNum){
				this.focus=true
				this.orderNum=orderNum;
			},
			
			// 发布评论
			onComments:function(){
				addComment({
					order_id:this.orderNum,
					openid:this.openid,
					content:this.content
				}).then(res=>{
					if(res==1){
						uni.showToast({
							title: '评论成功',
							duration: 1500,
						});
					}
					console.log(res)
				})
			},
		},
		components: {
			vTabs,
			uniLoadMore
		}
	}
</script>
<style>
	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #F6F7F8;
		margin-top: 30rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-order {
		background-color: #FFFFFF;
		padding: 20rpx;
		margin: 0 25rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		width: 660rpx;
	}

	.grace-shop {
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.grace-order-goods {
		font-size: 0;
		overflow: hidden;
		width: 660rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.grace-order-goods-img {
		width: 100rpx;
		height: 100rpx;
	}

	.grace-order-goods-name {
		line-height: 40rpx;
		width: 520rpx;
		overflow: hidden;
		font-size: 26rpx;
		margin: 0 20rpx;
		color: #333333;
		white-space: nowrap;
		text-overflow:ellipsis;
		flex: auto;
	}

	.grace-order-goods-price {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #333333;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.grace-order-goods-num {
		font-size: 22rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.icon-close {
		font-size: 28rpx;
		color: #999999;
		margin-left: 30rpx;
	}

	.grace-order-footer {
		margin-top: 2px;
	}

	.grace-order-number {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
	}

	.grace-order-status {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
		text-align: center;
	}

	.grace-order-btn {
		display: block;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999999;
		font-size: 22rpx;
		text-align: center;
		border-radius: 60rpx;
		border: 1px solid #999999;
		margin-left: 20rpx;
	}

	.grace-order-btn-red {
		border-color: #FF0036;
		color: #FF0036;
	}
	
	.enterComments{
		padding: 20rpx 32rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		position: fixed;
		bottom: 200px;
		left: 0;
		right: 0;
		z-index: 99999;
		
	}
	
	.enterComments .enterComments_textarea{
		width: 550rpx;
		height: 168rpx;
		padding:18rpx 28rpx ;
		box-sizing: border-box;
		border-radius: 18rpx;
		background: #F1F2F6;
		color: #333333;
	}
	
	.enterComments .enterComments_btn{
		padding: 0;
		margin: 0;
		width: 92rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		color: #FFFFFF;
		background:#DADADC ;
		border-radius: 12rpx;
		font-size: 28rpx;
	}
	
	.enterComments .enterComments_btn_active{
		background: #FC8F8F;
	}
	
	.no-list{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 288rpx;
		background: #FFFFFF;
	}
	
	.no-list>image{
		width: 423rpx;
		height: 266rpx;
		margin-bottom: 36rpx;
	}
	.no-list>text{
		color: #333333;
		font-size: 24rpx;
	}
	.no-list>button{
		width: 360rpx;
		height: 78rpx;
		background: #FFC102;
		border-radius: 39rpx;
		color: #FFFFFF;
		line-height: 78rpx;
		margin-top: 88rpx;
	}
</style>
